// clickCount 统计点击的次数
let clickCount = 0;
//
let nextDialogId = '0';

// 对话类
class Dialog {
    // 此对话的 id
    id;
    // 对话的内容
    content;
    // 下一条对话的 id
    nextId;
    // 对话的对应立绘
    picture;
    // type: 
    // "text" 对话
    // "option" 选项
    type:string;
    // 分支对应的下一个DIALOG ID
    branches:Array<GalOption>;
}

class GalOption {
    constructor(content, nextId) {
        this.content = content
        this.nextId = nextId
    }
    // 选项的文字
    content: string;
    // 选项对应的下一个 id
    nextId: string;
}


// 创建一个 Map 用来储存下面的键值对
const data = new Map<string, Dialog>();

const NewDialog = (id, content, nextId, type, branches) => {
    let a = new Dialog();
    a.id = id
    a.content = content
    a.nextId =nextId
    a.type = type
    a.branches = branches
    return a;
}

// 给 Dialog实例的属性赋值
(() => {
    data.set('0', NewDialog('0','我和爸爸妈妈走失了。。', '1', 'text', null))
    data.set('1', NewDialog('1','我一个人在大街上', '2', 'text', null))
    data.set('2', NewDialog('2','好害怕啊', '3', 'text', null))
    data.set('3', NewDialog('3','一位阿姨走过来了', '4', 'text', null))
    data.set('4', NewDialog('4','“小朋友，怎么只有你一个人呀？”', '5', 'text', null))
    data.set('5', NewDialog('5','外面这么冷，要不要和阿姨去家里玩奥特曼小游戏呀？', '6', 'text', null))

    let branches1 = new Array<GalOption>()
    branches1.push(new GalOption("我要去玩游戏！",'7'))
    branches1.push(new GalOption("我不去！",'8'))
    data.set('6', NewDialog('6', null, null, 'option', branches1))
    data.set('7', NewDialog('7','小朋友，你被坏人拐跑啦！', '0', 'text', null))
    data.set('8', NewDialog('8','爸爸妈妈说过了，不能和陌生的大人走', '9', 'text', null))
    data.set('9', NewDialog('9','休想骗我，哼', '10', 'text', null))
    data.set('10', NewDialog('10','这时，爸爸妈妈回来了', '11', 'text', null))
    data.set('11', NewDialog('11','阿姨飞快的跑掉了', '12', 'text', null))
    data.set('12', NewDialog('12','爸爸妈妈听完这件事，都夸奖了我并且给我买了好吃的棒棒糖！', '13', 'text', null))
    data.set('13', NewDialog('13','小朋友，恭喜你赢得了游戏！', '0', 'text', null))





})();
let btn1 = $("<button id=\"btn1\" class=\"btn btn-primary ml-2 mr-2 mt-2 branch\"></button>")
let btn2 = $("<button id=\"btn2\" class=\"btn btn-primary ml-2 mr-2 mt-2 branch\"></button>")

// 下一步按钮的 DOM 对象
const nextButton = $('#next');
// 对话框的 DOM 对象
const dialog = $("#text");
const conversation=$(".conversation")
//  修改文本框的内容
// 为 nextButton 的 click 事件添加一个监听器

let removeButton = () => {
    jQuery("#btn1").remove()
    jQuery("#btn2").remove()
}

let mut = () => {
    //将下一个 id 传递给 currentDialog
    let currentDialog = data.get(nextDialogId);
    console.log(nextDialogId)
    console.log(currentDialog)
    //如果 other 属性字符串为 yes ,插入button按钮
    switch(currentDialog.type) {
        case "text":
            dialog.text(currentDialog.content)
            nextDialogId = currentDialog.nextId
            break;
        case "option":
            dialog.text("")
            btn1.text(currentDialog.branches[0].content)
            conversation.prepend(btn1)
            jQuery("#btn1").click(() => {
                nextDialogId = currentDialog.branches[0].nextId
                mut()
                removeButton()
            })
            btn2.text(currentDialog.branches[1].content)
            conversation.prepend(btn2)
            jQuery("#btn2").click(() => {
                nextDialogId = currentDialog.branches[1].nextId
                mut()
                removeButton()
            })
            break;
        default:
            console.log("incorrect dialog type")
    }
}

nextButton.click(mut);